<template>
  <div style="width: 100%;height: 100%" class="prodect-main">
    <!--    第一部分-->
    <div style="width: 100%">
      <div style="margin:120px 0 40px 0;justify-content: center" class="fixed-row">
        <h2 style="font-size: 44px;font-weight: 600;color: #000">{{title}}</h2>
      </div>
      <div>
        <div v-for="(item,index) in blockSetArr" :key="item.textTitle" class="fixed-row" style="width: 100%;flex-direction: column;align-items: center;"

        >
          <template v-if="(index + 1) % 2 != 0">
            <!--        奇数渲染这个-->
            <div   style="width: 60%;align-items: flex-start;margin-bottom: 200px" class="fixed-row">
              <div style="display: flex;flex-direction: column;align-items: flex-start">
                <div style="font-weight: 600;font-size: 38px">{{index + 1}}<span style="font-size: 28px;color: #000">/{{blockSetArr.length}}</span></div>
                <h3 style="font-size: 44px;font-weight: 500;line-height: 62px;margin-bottom: 30px">{{item.textTitle}}</h3>
                <div class="toggle-box fixed-row toggle-block-arr" v-for="(row,inde) in item.arrSet" :key="row.title"
                :class="[item.activeInd == inde ? 'actibe-toggleBox' : '']" @mouseenter="clearIntearlVal(index,inde)" @mouseleave="startSimper">
                  <img :src="item.activeInd == inde ? item.arrSet[item.activeInd].activeImage : item.arrSet[item.activeInd].iconImage" style="width: 30px;height: 30px;margin: 0 12px 0 20px">
                  <span style="font-size: 18px;color: #000;">{{row.title}}</span>
                </div>
              </div>
              <div style="margin-left: 15px">
                <img :src="item.arrSet[item.activeInd].url" style="width: 770px;max-height: 560px">
              </div>
            </div>
          </template>
          <template v-else>
            <!--        偶数渲染这个-->
            <div  style="width: 60%;align-items: flex-start;margin-bottom: 200px" class="fixed-row">
              <div style="position: relative;left: -60px">
                <img :src="item.arrSet[item.activeInd].url" style="width: 770px;max-height: 560px">
              </div>
              <div style="display: flex;flex-direction: column;align-items: flex-start">
                <div style="font-weight: 600;font-size: 38px">{{index + 1}}<span style="font-size: 28px;color: #000">/{{blockSetArr.length}}</span></div>
                <h3 style="font-size: 44px;font-weight: 500;line-height: 62px;margin-bottom: 30px">{{item.textTitle}}</h3>
                <div class="toggle-box fixed-row toggle-block-arr" v-for="(row,inde) in item.arrSet" :key="row.title"
                     :class="[item.activeInd == inde ? 'actibe-toggleBox' : '']" @mouseenter="clearIntearlVal(index,inde)" @mouseleave="startSimper">
                  <img :src="item.activeInd == inde ? item.arrSet[item.activeInd].activeImage : item.arrSet[item.activeInd].iconImage" style="width: 30px;height: 30px;margin: 0 12px 0 20px">
                  <span style="font-size: 18px;color: #000;">{{row.title}}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {getProductInfoList} from '~/api/productIon'
  const { $gsap, $ScrollTrigger } = useNuxtApp();
  const title = ref('产品介绍')
const blockSetArr = ref(
  [
    {
      textTitle:'编辑问卷',
      activeInd:0,
      arrSet:[
        {
          activeImg:'',
          noActiveImg:'',
          title:'一键批量录入题目快速创建问卷',
          image:'https://image.wjx.com/images/index/editor1@2x.png'
        },
        {
          activeImg:'',
          noActiveImg:'',
          title:'问卷/表单/考试/投票等90多种题型',
          image:'https://image.wjx.com/images/index/editor2@2x.png'
        },
        {
          activeImg:'',
          noActiveImg:'',
          title:'跳转1关联/引|用等逻辑搭建复杂问卷',
          image:'https://image.wjx.com/images/index/editor3@2x.png'
        },
        {
          activeImg:'',
          noActiveImg:'',
          title:'皮肤/红包/密码等丰富周边设置',
          image:'https://image.wjx.com/images/index/editor4@2x.png'
        }
      ]
    },
    {
      textTitle:'发送问卷',
      activeInd:0,
      arrSet:[
        {
          activeImg:'',
          noActiveImg:'',
          title:'一键批量录入题目快速创建问卷',
          image:'https://image.wjx.com/images/index/editor1@2x.png'
        },
        {
          activeImg:'',
          noActiveImg:'',
          title:'问卷/表单/考试/投票等90多种题型',
          image:'https://image.wjx.com/images/index/editor2@2x.png'
        },
        {
          activeImg:'',
          noActiveImg:'',
          title:'跳转1关联/引|用等逻辑搭建复杂问卷',
          image:'https://image.wjx.com/images/index/editor3@2x.png'
        },
        {
          activeImg:'',
          noActiveImg:'',
          title:'皮肤/红包/密码等丰富周边设置',
          image:'https://image.wjx.com/images/index/editor4@2x.png'
        }
      ]
    }
  ]
)
let time = null
  function clearIntearlVal(index,ind){
    blockSetArr.value[index].activeInd = ind
    clearInterval(time)
  }

  function startSimper(){
    time = setInterval(()=>{
      if(blockSetArr.value.length){
        blockSetArr.value.forEach(item => {
          if(item.activeInd >= item.arrSet.length-1){
            item.activeInd = 0
          }
          else{
            item.activeInd = item.activeInd + 1
          }
        })
      }
    },1800)
  }
onMounted(async ()=>{
  await getTableDetail()
  time = setInterval(()=>{
    if(blockSetArr.value.length){
      blockSetArr.value.forEach(item => {
        if(item.activeInd >= item.arrSet.length-1){
          item.activeInd = 0
        }
        else{
          item.activeInd = item.activeInd + 1
        }
      })
    }
  },1800)
})
onUnmounted(()=>{
  clearInterval(time)
})

  async function getTableDetail(){
    const res = await getProductInfoList()
    console.log(res.data.records[0],'res.data.records[0]')
    title.value = res.data.records[0].title
    // bannerHeight.value = document.documentElement.clientHeight - 84
    const cloneArr = JSON.parse(res.data.records[0].context)
    blockSetArr.value = cloneArr.map(item => {
      console.log(item,'items')
      return {
        textTitle:item.title,
        activeInd:0,
        arrSet:item.childProdect
      }
    })

    console.log(blockSetArr.value,'blockSetArr')
  }
</script>

<style scoped lang="less">

  .toggle-box{
    background: #fafafa;
    height: 60px;
    padding: 0 20px 0 0;
    cursor: pointer;

    &:hover{
      background: #fff;
      border: 1px solid #dfdfdf;
    }
  }

  .actibe-toggleBox{
    background: #fff;
    border: 1px solid #dfdfdf;
    font-weight: 600;
  }

  .toggle-block-arr{
    width: 400px;
    &:not(:last-child){
      margin-bottom: 10px;
    }
  }
</style>
